<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>狂神到底多大</title>
    <!--semantic-ui-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link th:href="@{/qinjiang/css/qinstyle.css}" rel="stylesheet">
</head>
<body>


<!--主容器-->
<div class="ui container">

    <div th:replace="~{/commons/common::nav-menu(active='blog.html')}"></div>

    <!--中间主体-->
    <div class="ui grid">
        <div class="row">
            <div class="twelve wide column">
                <div class="ui segment">
                    <div class="content">
                        <!--标题居中-->
                        <h3 th:text="${article.getTitle()}" class="ui header" style="text-align: center">
                        </h3>
                        <!--作者信息和创建时间-->
                        <div class="ui secondary  menu">
                            <a class="item">作者：<span th:text="${article.getAuthor()}"></span></a>
                            <div class="right menu">
                                <a class="ui item">创建时间：<span th:text="${article.getCreateTime()}"></span></a>
                            </div>
                        </div>
                        <!--文章主体内容-->
                        <div class="ui segment">
                            <div id="doc-content">
                                <textarea style="display:none;" placeholder="markdown" th:text="${article.getContent()}"></textarea>
                            </div>
                        </div>
                        <!--文章底部-->
                        <div class="ui segment">
                            <p>点赞，收藏，关注</p>
                        </div>
                    </div>
                </div>
            </div>

            <!--博客侧边栏-->
            <div th:replace="~{/views/blog/index::blog-right-card}"></div>

        </div>

    </div>

    <div th:replace="~{/commons/common::common-footer}"></div>
</div>

</div>


<script th:src="@{/qinjiang/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/qinjiang/js/semantic.min.js}"></script>
<script>
    //选项卡
    $('.menu .item').tab();
    $('.ui.sticky').sticky();
</script>


<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}" />
<script th:src="@{/editormd/lib/jquery.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.min.js}"></script>

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });});
</script>

</body>
</html>